<template>
	<view class="nav">
		<view :style="'height:'+ status +'rpx;'"></view>
		<!-- height:'+navHeight+'rpx ;line-height:'+navHeight+'rpx ; -->
		<view v-if="isHome" class="headNav" :style="'padding-left:19rpx ;'">
			<text class="city" :style="'margin-top: '+(menu.top*2 + 10 - 2 - status)+'rpx;text-align: center;'">中部地区</text>
			<view style="flex: 1">
				<!-- #f4f4f4 -->
				<navigator
					url="/pages/search/index"
					:style="
						'height:' +
						(menu.height*2 + 0) +
						'rpx;line-height:' +
						(menu.height*2 + 0) +
						'rpx;margin-top:' + 
						(menu.top*2 - 2 - status) +
						'rpx;margin-left:32rpx;margin-right:' +
						(menu.width*2 + 24 + 108) + 
						'rpx;background:#f4f4f4 ;border-radius:200rpx;text-align:center'
					"
				>
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
		<view v-else :style="'height:'+ navHeight +'rpx;' + containerStyle" class="navbar">
			<view class="back-icon" @click="backOrHome">
				<!-- #ifndef MP-TOUTIAO -->
				<image v-if="pages>1" src="/static/resource/navbar/ic_back.png"></image>
				<image v-else src="/static/logo.png"></image>
				<!-- #endif -->
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:' + navHeight + 'rpx;line-height:'+navHeight+'rpx'">{{titleText}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onBeforeMount, defineProps, reactive } from 'vue'
	const props = defineProps({
		background:{
			type:String,
			default:'rgba(255,255,255,1)'
		},
		color:{
			type:String,
			default:'rgba(0,0,0,1)'
		},
		fontSize:{
			type:String,
			default:'32'
		},
		iconWidth:{
			type:String,
			default:'116'
		},
		iconHeight:{
			type:String,
			default:'38'
		},
		titleText:{
			type:String,
			default: ''
		},
		isHome:{
			type:Boolean,
			default:false
		}
	})
	onBeforeMount(()=>{
		setNavSize()
		setStyle()
	})
	const status = ref(0)
	const navHeight = ref(0)
	const containerStyle = ref(0)
	const textStyle = ref(0)
	const iconStyle = ref(0)
	const pages = ref(getCurrentPages().length)
	// 获取到胶囊的位置
	
	// #ifdef H5
	const menu = { width: 83, height: 28, top: 11, right: 386, bottom: 93, left: 320 } 
	// #endif
	
	// #ifndef H5
		const menu = reactive(uni.getMenuButtonBoundingClientRect())
	// #endif
	
	console.log(menu)
	
	const setNavSize = () =>{
		const {system, statusBarHeight} = uni.getSystemInfoSync()
		console.log(uni.getSystemInfoSync())
		console.log(system+'<<===system===')
		console.log(statusBarHeight+'<<===statusBarHeight===')
		status.value = statusBarHeight * 2
		
		const isIOS = system.indexOf('iOS') > -1
		
		if(!isIOS){
			navHeight.value = 96
		}else{
			navHeight.value = 88
		}
	}
	
	const setStyle = () => {
		containerStyle.value = ['background:' + props.background].join(';')
		textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';')
		iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:'+props.iconHeight + 'rpx'].join(';')
	}
	
	const backOrHome = () =>{
		if(pages.value > 1){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
</script>

<style>
	.nav{
		position: fixed;
		width: 100%;
		top:0;
		left: 0;
		z-index: 2;
		
	}
	.back-icon{
		display: flex;
		align-items: center;
		width: 60rpx;
		height: 100%;
		margin-left: 20rpx;
	}
	.back-icon image{
		border-radius: 50rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.nav-title {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
	}
	.headNav{
		display: flex;
	}
	.city {
		display: inline-block;
		position: relative;
		font-size: 28rpx;
		font-weight: bold;
		padding-left: 75rpx;
		/* #ifndef MP-TOUTIAO */
		background: url()
			no-repeat left center;
		/* #endif */
		background-size: 60rpx;
	}
	
	.city:after {
		content: ' ';
		display: inline-block;
		height: 6px;
		width: 6px;
		border-width: 1px 1px 0 0;
		border-color: #353535;
		border-style: solid;
		-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		position: relative;
		top: -2px;
		position: absolute;
		top: 50%;
		margin-top: -4px;
		right: -10px;
	}
	.search-text {
		display: inline-block;
		padding-left: 30rpx;
		color: #bbbbbb;
		font-size: 28rpx;
		background: url()
			no-repeat left center;
		background-size: 23rpx;
	}
</style>